<template>
  <div>
     <!-- position -->
    <div class="position">
      <Breadcrumb>
          <BreadcrumbItem to="/"><Icon type="ios-home-outline" />首页</BreadcrumbItem>
          <BreadcrumbItem to="/cloudVideo">我的预约</BreadcrumbItem>
          <BreadcrumbItem to="/cloudVideo">已结束列表</BreadcrumbItem>
          <BreadcrumbItem>已结束详情</BreadcrumbItem>
      </Breadcrumb>
    </div>
    <!-- content -->
    <div class="hd pd20">
      <div class="title-1">
        <div class="inner">患者信息</div>
        <div class="inner-right"> 已结束</div>
      </div>


      <Card class="mt20">
        <Row>
        
          <Col span="12">
            <table class="common-table">
              <tr>
                <td class="t3 text-right">姓名：</td>
                <td>张家辉</td>
                <td class="t3 text-right">预约日期：</td>
                <td>2018-10-22</td>
              </tr>
               <tr>
                <td class="t3 text-right">性别：</td>
                <td>男</td>
                <td class="t3 text-right">预约时段：</td>
                <td>10:00-12:00</td>
              </tr>
               <tr>
                <td class="t3 text-right">年龄：</td>
                <td>40岁</td>
                <td class="t3 text-right">预约医生：</td>
                <td>哎聊天</td>
              </tr>
               <tr>
                <td class="t3 text-right">门诊号码：</td>
                <td>412555555</td>
                <td class="t3 text-right">就诊序号：</td>
                <td>2</td>
              </tr>
               <tr>
                <td class="t3 text-right" >证件号码：</td>
                <td>41445555555565</td>
              </tr>
            </table>
          </Col>
        </Row>
      </Card>

       <div class="title-1 mt20">
        <div class="inner">主观病例</div>
      </div>

      <Card class="mt10">
        <p slot="title">
            所患疾病
        </p>
        
        <Row>
          <Col span="24">
            基督教是范德萨反倒是发生地方都是反倒是
          </Col>
        </Row>
      </Card>
      <Card class="mt10">
        <p slot="title">
            病情描述
        </p>
        
        <Row>
          <Col span="24">
            基督教是范德萨反倒是发生地方都是反倒是
          </Col>
        </Row>
      </Card>

      <Card class="mt10">
        <p slot="title">
            病例报告照片
        </p>
        <Row class="row-image" :gutter="10">
          <Col span="4" v-for="i in 2" class="item" @click.native="itemClick">
            <img src="../../assets/images/patient_default.png" alt="">
            <div class="text-viewbig">点击查看大图</div>
          </Col>
        </Row>
      </Card>


      <div class="title-1 mt20">
        <div class="inner">处置建议</div>
      </div>
      <Card class="mt10">
        <Row>
          <Col span="24">
            基督教是范德萨反倒是发生地方都是反倒是
          </Col>
           <Col span="24" class="mt20">
              <Row>
                <Col span="4">
                  提交时间：2018-10-10 10:22
                </Col>
                <Col span="20" class="text-right">
                   签名：方祖元 
                </Col>
              </Row>
          </Col>
        </Row>
      </Card>

    </div>

    <!-- modal -->
    <Modal
        v-model="modal1"
        title="查看大图"
        @on-ok="modal1=false"
        :footer-hide="true"
        >
        <p class="text-center">
          <img src="../../assets/images/patient_default.png" alt="">
        </p>
    </Modal>

  </div>
</template>

<script>
export default {
  data () {
    return {
      modal1: false
    }
  },
  methods: {
    itemClick () {
      this.modal1 = true
    }
  }
}
</script>

<style lang="less" scoped>
.common-table {
  &.table-center {
    text-align: center;
  }
  border-collapse: collapse;
  width: 100%;
  thead {
  }
  td{
    padding: 6px;
  }
}
.row-image {
  .item {
    position: relative;
    .text-viewbig {
      position: absolute;
      bottom: 6px;
      left: 5px;
      right: 5px;
      background: #5669C7;
      color: #fff;
      text-align: center;
      line-height: 26px;
      cursor: pointer;
    }
  }
  img {
    width: 100%;
  }
}
</style>
